<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人社保计算器-Web版</title>
		<!-- 新 Bootstrap5 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
		 
		<!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
		<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
		 
		<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
	    <script>
			// 在这里定义JS函数
			function calc() {
				
				// 取到文本框里用户输入的工资
				sal = document.getElementById("salary").value;
				regExp = /^[0-9]{4,5}$/;
				if (!regExp.test(sal)) {
					document.getElementById("salary").value="请输入4-5位数字！";
					document.getElementById("salary").style="color:red";
					return;
				}
				// 把工资转成数字
				salnum = parseInt(sal);
				// 计算养老保险
				ylgr = salnum * 0.08;
				ylgs = salnum * 0.2;
				// 计算医疗保险
				ybgr = salnum * 0.02;
				ybgs = salnum * 0.1;
				// 计算失业保险
				sygr = salnum * 0.005
				sygs = salnum * 0.01
				// 计算工伤保险
				gsgs = salnum * 0.005;
				// 生育险
				sybx = salnum * 0.01;
				// 计算公积金
				gjjgr = salnum * 0.12;
				gjjgs = salnum * 0.12;
				
				// 把计算结果放入单元格
				document.getElementById("ylgr").innerText=ylgr;
				document.getElementById("ylgs").innerText=ylgs;
				
				document.getElementById("ybgr").innerText=ybgr;
				document.getElementById("ybgs").innerText=ybgs;
				
				document.getElementById("sygr").innerText=sygr;
				document.getElementById("sygs").innerText=sygs;
				
				document.getElementById("sybx").innerText=sybx;
				document.getElementById("gsgs").innerText=gsgs;
				
				document.getElementById("gjjgr").innerText=gjjgr;
				document.getElementById("gjjgs").innerText=gjjgs;
				
				// 个人缴纳
				grhj = ylgr + ybgr + sygr + gjjgr;
				document.getElementById("geren").innerText=grhj;
				//公司缴纳
				gshj = ylgs + ybgs + sygs + gsgs + sybx + gjjgs;
				document.getElementById("gongsi").innerText=gshj;
				// 计算公司和个人合计
				heji = grhj + gshj;
				document.getElementById("heji").innerText=heji;
				
				// 账户总额
				zhanghu = gshj + salnum;
				document.getElementById("total").innerText=zhanghu;				
			}
		</script>
	</head>
	<body>
		<div class="container text-center">
			<br>
			<br>
			<h3>个人社保计算器-Web版</h3>
			<table class="table table-bordered text-center">
				<tr>
					<td colspan="3">
						<input onfocus="this.value=''" class="form-control" type="text" id="salary" placeholder="请输入薪资"/>
					</td>
					<td>
						<button onclick="calc()"  class="btn btn-primary">计算</button>
					</td>
				</tr>
				<tr>
					<td>个人缴纳金额</td>
					<td id="geren"></td>
					<td>公司缴纳金额</td>
					<td id="gongsi"></td>
				</tr>
				<tr>
					<td>合计缴纳</td>
					<td id="heji" style="color:red;font-weight: 500;"></td>
					<td>账户总额</td>
					<td id="total" style="color:red;font-weight: 500;"></td>
				</tr>
			</table>
			<table class="table table-bordered text-center">
				<tr class="bg-primary" style="color:white">
					<td>缴费项目</td>
					<td>个人缴纳</td>
					<td>公司缴纳</td>
				</tr>
				<tr>
					<td>养老保险</td>
					<td id="ylgr"></td>
					<td id="ylgs"></td>
				</tr>
				<tr>
					<td>医疗保险</td>
					<td id="ybgr"></td>
					<td id="ybgs"></td>
				</tr>
				<tr>
					<td>失业保险</td>
					<td id="sygr"></td>
					<td id="sygs"></td>
				</tr>
				<tr>
					<td>工伤保险</td>
					<td></td>
					<td id="gsgs"></td>
				</tr>
				<tr>
					<td>生育险</td>
					<td></td>
					<td id="sybx"></td>
				</tr>
				<tr>
					<td>公积金</td>
					<td id="gjjgr"></td>
					<td id="gjjgs"></td>
				</tr>
			</table>
			<div class="text-center" style="color:red">
				开发者：2020215225 网工专业 奶油小雪高
			</div>
		</div>
	</body>
</html>
